<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>LightBox</title>
		<style type="text/css">
			body{background: #ddd;}
			.wrap{width: 1200px;margin: 0 auto;}
			.tit {width: 100%;text-align: center;font-size: 48px;font-weight: 900;}
			.img {width: 100%;height: 190px;padding: 10px 0;}
			.img>img {width:180px;height: auto;margin:3px;cursor: pointer;}
			.imgBox{
				width:190px;
				height: 190px;
				float: left;
				border: 1px solid #ccc;
				margin-right: 5px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.imgBox>img{
				width:160px;height: auto;margin:5px;cursor: pointer;border: 5px solid #fff;
			}
			table {border-collapse: collapse;border: 1px solid #ccc;width: 100%;max-width: 100%;}
			table th,td {border: 1px solid #ccc;padding: 3px;}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="tit">lightBox插件</div>
			<table class="">
				<tbody>
					<tr>
						<td>class="js-lightBox"</td>
						<td>表示这个元素要启用lightbox标识</td>
					</tr>
					<tr>
						<td>data-role='lightBox'</td>
						<td>表示这个元素要启用lightbox标识</td>
					</tr>
					<tr>
						<td>data-src='img/1.jpg'</td>
						<td>图片的源地址</td>
					</tr>
					<tr>
						<td>data-desc='1.jpg'</td>
						<td>图片描述信息</td>
					</tr>
					<tr>
						<td>data-id='1'</td>
						<td>图片的唯一标识</td>
					</tr>
					<tr>
						<td>data-group='group-1'</td>
						<td>图片的组别</td>
					</tr>
				</tbody>
			</table>
			<h1>多图片组</h1>
			<div class="img">
				<div class="imgBox">
					<img src="img/1.jpg" class="js-lightBox" data-role='lightBox' data-src='img/1.jpg' data-id='1' data-desc='1.jpg' data-group='group-1' />
				</div>
				<div class="imgBox">
					<img src="img/2.jpg" class="js-lightBox" data-role='lightBox' data-src='img/2.jpg' data-id='2' data-desc='2.jpg' data-group='group-1' />
				</div>
				<div class="imgBox">
					<img src="img/3.jpg" class="js-lightBox" data-role='lightBox' data-src='img/3.jpg' data-id='3' data-desc='3.jpg' data-group='group-1' />
				</div>
				<div class="imgBox">
					<img src="img/4.jpg" class="js-lightBox" data-role='lightBox' data-src='img/4.jpg' data-id='4' data-desc='4.jpg' data-group='group-1' />
				</div>
				<div class="imgBox">
					<img src="img/5.jpg" class="js-lightBox" data-role='lightBox' data-src='img/5.jpg' data-id='5' data-desc='5.jpg' data-group='group-1' />
				</div>
				<div class="imgBox">
					<img src="img/6.jpg" class="js-lightBox" data-role='lightBox' data-src='img/6.jpg' data-id='6' data-desc='6.jpg' data-group='group-1' />
				</div>
			</div>
			<h1>单图片组</h1>
			<div class="img">
				<div class="imgBox">
					<img src="img/1.jpg" class="js-lightBox" data-role='lightBox' data-src='img/1.jpg' data-id='1' data-desc='1.jpg' data-group='group-2' />
				</div>
			</div>
		</div>	
		<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js" ></script>
		<script type="text/javascript" src="js/MaxLightBox.js" ></script>
		<script type="text/javascript">
			$(function(){
					$("img").each(function(){
						var img = $(this);
						var maxWidth  = 170,
								maxHeight = 170,
								imgWidth  = 0,
								imgHeight = 0;
						var imgDom = new Image();
						imgDom.onload = function(){
							imgWidth = imgDom.naturalWidth;
							imgHeight = imgDom.naturalHeight;
							var scale = Math.min((maxWidth/imgWidth),(maxHeight/imgHeight),1);
							img.css({"width":imgWidth*scale,"height":imgHeight*scale});
						};
						imgDom.src = $(this).attr("src");
						
					});
					$.MaxLightBox();
			});
		</script>
	</body>
</html>
